<template>

        <Card>			
            <!--标题-->
            <p slot="title">
                <Icon type="ios-list-outline"></Icon> 提现记录
            </p>			
            <!--标题end-->

            <!--搜索条件-->
            <Select v-model="status" style="width:20%" filterable>
                <Option v-for="item in list1" :value="item.value" :key="item.label">{{ item.label }}</Option>
            </Select>

            <Select v-model="channel" style="width:20%" filterable>
                <Option v-for="item in list2" :value="item.value" :key="item.label">{{ item.label }}</Option>
            </Select>

            <DatePicker type="daterange" placeholder="选择时间段" style="width: 20%" v-model="timeRange"></DatePicker>

            <Input v-model="keyword" style="width:20%" clearable placeholder="关键字：户名/帐号" />

            <Button type="primary" icon="ios-search" @click="getData(1)">搜索</Button>			
            <Button type="primary" @click="exportTable">导出清单</Button>			
            <!--搜索条件end-->			
            <br>
            <br>

            <!--提现记录数据-->
            <Table stripe border :columns="columns" :data="datas" size="small" :loading="isLoadig"></Table>
            <!--提现记录数据end-->


            <!--分页-->
            <Page :total="total" 
            :page-size="size" 
            :current.sync="currentPage"
            show-elevator 
            @on-change="getData"
            show-total style="text-align:center"></Page>
            <!--分页end-->
        </Card>	

</template>	

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
export default {
  name: 'abnormal_report',
  data () {
    return {
      isLoadig: true,
      size: 20,
      total: 0,
      currentPage: 1,
      keyword: '',
      timeRange: [],
      columns: [
        // 提现记录表头
        {
          title: '提现时间',
          // key: 'time',
          minWidth: 150,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              new Date(obj.row.date).Format('yyyy-MM-dd HH:mm')
            )
          }
        },
        {
          title: '交易单号',
          key: 'order_num',
          minWidth: 160
        },
        {
          title: '提现金额（元）',
          minWidth: 140,
          key: 'amount'
        },
        {
          title: '收款账户类型',
          minWidth: 140,
          render (createElement, obj) {
            let typeMap = ['', '微信', '支付宝', '银行卡']
            return createElement(
              'span', // 标签名称
              typeMap[obj.row.type]
            )
          }
        },
        {
          title: '户名',
          minWidth: 130,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              obj.row.account.name
            )
          }
        },
        {
          title: '账号',
          minWidth: 160,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              obj.row.account.card
            )
          }
        },
        {
          title: '开户行',
          minWidth: 150,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              obj.row.account.bank
            )
          }
        },
        {
          title: '提现状态',
          minWidth: 100,
          render (createElement, obj) {
            let typeMap = [
              '',
              '待提现',
              '已提现',
              '提现失败',
              '提现拒绝'
            ]
            return createElement(
              'span', // 标签名称
              typeMap[obj.row.cash_status]
            )
          }
        },
        {
          title: '实际到账时间',
          minWidth: 160,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              new Date(obj.row.updated_at).Format(
                'yyyy-MM-dd HH:mm'
              )
            )
          }
        }
      ],
      datas: [
        // 提现记录具体数据
      ],
      channel: 0,
      status: 0,
      list1: [
        {
          value: 0,
          label: '全部状态'
        },
        {
          value: 1,
          label: '待提现'
        },
        {
          value: 2,
          label: '已提现'
        },
        {
          value: 3,
          label: '提现失败'
        },
        {
          value: 4,
          label: '提现拒绝'
        }
      ],
      list2: [
        {
          value: 0,
          label: '收款账户类型'
        },
        {
          value: 1,
          label: '微信'
        },
        {
          value: 2,
          label: '支付宝'
        },
        {
          value: 3,
          label: '银行卡'
        }
      ]
    }
  },
  created () {
    this.getData(1) // 获取第一页全部数据
    // this.getRegion(); // 获取地区
  },
  methods: {
    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      let params = {
        limit: this.size,
        offset: this.size * (page - 1),
        key_word: this.keyword || null,
        cash_status: this.status || null,
        type: this.channel || null,
        begin: this.timeRange[0]
          ? new Date(this.timeRange[0]).getTime()
          : null,
        end: this.timeRange[1]
          ? new Date(this.timeRange[0]).getTime()
          : null
      }

      http.request(this, api.cashes, null, params, res => {
        if (res) {
          this.datas = res.cashes
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    },
    exportTable () {
      let params = {
        key_word: this.keyword || null,
        cash_status: this.status || null,
        type: this.channel || null,
        begin: this.timeRange[0]
          ? new Date(this.timeRange[0]).getTime()
          : null,
        end: this.timeRange[1]
          ? new Date(this.timeRange[0]).getTime()
          : null
      }
      // 导出报表
      http.exportTable(this, api.cashes_export, null, params)
    }
  }
}
</script>

<style lang="less">
.export-link {
    color: #fff;
    text-decoration: none;
}
.export-link:hover {
    color: #fff;
}
</style>